<template>
	<view style="padding-top: 60rpx;">
		<img id="copy" style="display: none;width: 100%;">
		<view id="app" style="display: block;">
			<view class="yao-container" :style="{'background-image': mubanPicture.length>0 ? 'url('+mubanPicture+')' : 'url('+'../../static/center/bg1.jpeg'+')' ,'background-repeat':'no-repeat'}">
				<view class="yao-head">
					<view class="head-box">
						<img :src="swichIcon()" class="img" id="touxiang">
					</view>
					<view class="canyu-box">
						<h4 style="font-size: 18px;">{{userinfo.usersName}}</h4>
						<p style="font-size: 13px;">邀请您一起参与携联平台</p>
					</view>
				</view>
				<view class="erweima-box" style="position: relative;">
					<img :src="swichErweima()" style="width: 200px;height: 200px;position: relative;z-index: 1;">
					<view style="width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;z-index: 1000;"></view>
				</view>
				<view class="slogan">
					<h1 id="test1" contenteditable="true" style="font-size: 36px;outline: none;">推荐中幸运大奖<br>注册赢幸运大奖</h1>
				</view>
				<view class="yao-time">
					<view class="time">
						<view>邀请时间</view>
						<view style="padding-top: 10rpx;">{{time}}</view>
						<view style="padding-top: 35rpx;">来自携联好友</view>
					</view>
					<view class="finger">
						<view>
							<view class="finger-bg"></view>
							<view>长按识别 注册赢奖</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-box">
			<view class="toggle-left">
				<view v-if="mubanList.length>0" class="toggle-bg">
					<scroll-view scroll-x="true" style="white-space: nowrap;">
						<view style="display: inline-block;" class="bgs active" v-for="(item,i) in mubanList" :key="item.id" @click="goMuban(item.picture)">
							<image :src="switchImg(item.picture)" style="width: 3rem;height: 3rem;"></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="fix">
				<image style="width: 2rem;height: 2rem;" :src="swichErweima()">
				<p>二维码</p>
			</view>
			<view class="erweima-showbig" style="display: none;">
				<span id="close">×</span>
				<h4 style="margin-bottom: 0.625rem;">保存二维码进行分享</h4>
				<img id="code3" alt="" style="width: 6rem;">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mubanList:[],	//分享模板集合
				mubanPicture:'',//选中的模板图片，默认第一个
				shareInfo:'',	//分享信息
				time:'',		//当前时间,2021-04-20 星期二 14:00
				userinfo:[],	//用户信息
				erweima:'',		//二维码
			}
		},
		onLoad() {
			this.time = this.getTime()
			this.userinfo = uni.getStorageSync('userinfo')
			//得到所有启用模板
			this.$http.get('/moban/chaQiyongMoban', {
				
			}).then(res => {
				if(res.data.code == 200) {
					this.mubanList = res.data.data
					if(res.data.data.length > 0){
						this.mubanPicture = this.host+"/image/"+res.data.data[0].picture
					}
				}
			})
			//得到分享二维码
			this.$http.get('/center/getQrcodexcx', {
				url:this.host.split('/weixin')[0]+"/weixin/center/yao.html?userid="+uni.getStorageSync('usersId'),
				userid:uni.getStorageSync('usersId')
			}).then(res => {
				if(res.data.code != 200) {
					this.$u.toast(res.data.msg)
				}else{
					this.erweima = res.data.data.base64
				}
			})
		},
		methods: {
			goMuban(picture){
				this.mubanPicture = this.host+"/image/"+picture;
			},
			swichErweima(){
				return this.erweima
			},
			swichIcon(){
				if(this.userinfo.icon!=null && this.userinfo.icon!="" && this.userinfo.icon.length > 0){
					return this.host + this.userinfo.icon
				}else{
					return '../../static/center/yuantiao.jpg'
				}
			},
			switchImg(picture){
				if(picture.length > 0){
					return this.host + "/image/" + picture
				}else{
					return '../../static/center/bg1.jpeg'
				}
			},
			getTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				var week;
				    switch (date.getDay()){
				         case 1: week="星期一"; break;
				         case 2: week="星期二"; break;
				         case 3: week="星期三"; break;
				         case 4: week="星期四"; break;
				         case 5: week="星期五"; break;
				         case 6: week="星期六"; break;
				         default: week="星期天";
				     }
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + week + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			}
		}
	}
</script>

<style>
	*{
		padding: 0px;
		margin: 0px;
	}
	html,body,#app{
		font-family: "微软雅黑";
		color: white;
		font-size: 12px;
		width: 100%;
		height: 100%;
		background:#ededed;
	}
	a{
		text-decoration: none;
		display: inline-block;
		color: #000000;
	}
	img{
		vertical-align: middle;
	}
	.main{
		width: 100%;
		height: 100%;
		padding-top: 18.75rem;
		position: fixed;
		top:0px;
		left: 0px;
		background-color: rgba(13,13,13,0.5);
		z-index: 9999;
	}
	a{
		display: block;
		text-align: center;
		font-size: 20px;
		margin-top: 200px;
	}
	.loading{
		width: 150px;
		height: 15px;
		margin: 0 auto;
		margin-top:100px;
	}
	.loading span{
		display: inline-block;
		width: 15px;
		height: 100%;
		margin-right: 5px;
		border-radius: 50%;
		background: lightcoral;
		animation: load 1.04s ease 1;
	}
	.loading span:last-child{
		margin-right: 0px;
	}
	@-webkit-keyframes load{
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	.loading span:nth-child(1){
		-webkit-animation-delay:0.13s;
	}
	.loading span:nth-child(2){
		-webkit-animation-delay:0.26s;
	}
	.loading span:nth-child(3){
		-webkit-animation-delay:0.39s;
	}
	.loading span:nth-child(4){
		-webkit-animation-delay:0.52s;
	}
	.loading span:nth-child(5){
		-webkit-animation-delay:0.65s;
	}
	.hide{
		display: none;
	}
	.yao-container{
		/* background-image: url(../../../static/center/bg1.jpeg); */
		background-size: 100%;
		color: white;
		width: 100%;
		height: 100%;
		padding: 1.25rem;
		min-height: 30rem;
		position: relative;
		z-index: 20;
	}
	#app{
		display: flex;
		align-items: stretch;
	}
	.yao-head{
		display: flex;
		justify-content: space-between;
	}
	.yao-head .img{
		width: 3rem;
		height: 3rem;
		border-radius: 4rem;
		border: 0.17rem solid #808080;
	}
	.canyu-box h4{
		text-align: right;
		margin-top: 20rpx;
		margin-bottom: 0.625rem;
	}
	.erweima-box{
		width: 12rem;
		height: 12rem;
		margin:1rem auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.slogan{
		text-align: center;
		position: relative;
		z-index: 100;
	}
	.yao-time{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.yao-time .time{
		height: 3rem;
		display: flex;
		font-size: 13px;
		flex-direction: column;
		justify-content: space-between;
	}
	.yao-time .time h2{
		font-size: 1rem;
	}
	/*.yao-time .finger img{*/
	/*	width: 4rem;*/
	/*}*/
	.yao-time .finger{
		display: flex;
		text-align: center;
		padding-top: 2rem;
	}
	.finger .finger-bg{
		width: 3rem;
		height: 3rem;
		background: url(../../static/center/finger.gif) no-repeat center;
		background-size: 100%;
		display: inline-block;
	}
	.yao-time .finger p{
		margin-top: 0.325rem;
		font-size: 0.625rem;
	}
	.bg-box{
		position: fixed;
		width: 100%;
		bottom: 0rem;
		background-color: white;
		padding: 1.25rem;
		/*margin-left: -1.25rem;*/
		border-radius: 1.25rem;
		z-index: 50;
	}
	.toggle-left{
		/* display: flex; */
		/* overflow: auto; */
		width: 11rem;
		position: relative;
		white-space: nowrap;
	}
	.toggle-bg{
		/* overflow:auto; */
		/* max-width: 14rem; */
		flex-wrap: nowrap;
	}
	.toggle-bg .bgs{
		/* float: left; */
		width: 3rem;
		height: 3rem;
		position: relative;
		overflow: hidden;
		margin-right: 0.625rem;
	}
	.toggle-bg img{
		width: 100%;
	}
	.corner{
		position: absolute;
		bottom: 0rem;
		right: 0rem;
		display: none;
	}
	.corner img{
		width: 1.25rem;
	}
	.active .corner{
		display: block;
	}
	.fix{
		position: absolute;
		right: 3rem;
		top: 1.5rem;
	}
	.fix p{
		font-size:0.5rem;
		text-align: center;
		margin-top: 0.25rem;
	}
	.erweima-showbig{
		position: fixed;
		bottom: 0rem;
		width: 100%;
		padding: 4rem 0rem;
		margin-left: -1.25rem;
		background-color: white;
		border-radius: 0.625rem;
		color: #000000;
		text-align: center;
	}
	#close{
		position: absolute;
		right: 2rem;
		top: 1rem;
	}
	.canyu-box p,.time p{
		color: white;
	}
</style>
